<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData()"
      @reset="handleRest()"
    >
      <template #plus-field-result>
        <el-radio-group v-model="queryform.result">
          <el-radio-button label="全部" :value="-1" />
          <el-radio-button label="正常" :value="1" />
          <el-radio-button label="异常" :value="2" />
        </el-radio-group>
      </template>
      <template #plus-field-warehouseId>
        <k-select-http
          v-model="queryform.warehouseId"
          paramsKey="searchValue"
          :immediately="true"
          :httpfn="getWarehouseList"
          :keyprops="{ label: 'name', value: 'warehouseId' }"
        />
      </template>
    </PlusSearch>
    <div class="mb-2">
      <btnExport
        :exportApi="exportApi"
        :queryform="getQueryParam()"
        download-name="盘点记录"
      />
    </div>
    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />
  </main-box>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";

import kSelectHttp from "@/components/k-select-http/index.vue";
import { allListApi as getWarehouseList } from "@/api/warehouse";
import { listApi, exportApi } from "@/api/depot/stockTake/list";
import btnExport from "@/components/btnExport/index.vue";
import { useRouter } from "vue-router";

import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { stockTakeResultFacility } from "@/utils/dict";
/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "盘点结果",
    prop: "result"
  },
  {
    label: "工具室",
    prop: "warehouseId"
  },
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "盘点设备" }
  }
];
const queryform = ref({
  warehouseId: "",
  result: -1,
  searchValue: ""
});

const handleRest = () => {
  initData(true);
  queryform.value.result = -1;
};

const getQueryParam = () => {
  const params = { ...queryform.value } as any;
  params.result = params.result < 0 ? "" : params.result;
  return params;
};

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  { label: "工具室", prop: "warehouseName" },
  { label: "最近盘点时间", prop: "stockTakeTime" },
  { label: "盘点设备", prop: "facilityNames" },
  {
    label: "盘点结果",
    prop: "result",
    cellRenderer: ({ row }) => {
      const target = stockTakeResultFacility(row.result);
      return <el-tag type={target.type}>{target.name}</el-tag>;
    }
  },
  { label: "盘亏", prop: "lossTotal" },
  { label: "盘赢", prop: "profitTotal" },
  {
    label: "盘点类型",
    prop: "type",
    formatter: ({ type }) => (type == 1 ? "手动" : "自动")
  },
  {
    label: "操作",
    prop: "action",
    cellRenderer: ({ row }) => {
      return (
        <el-link type="primary" underline={false} onClick={() => goDetail(row)}>
          查看
        </el-link>
      );
    }
  }
];

const initData = async (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    ...getQueryParam()
  } as any;
  await listApi(params).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};
initData();

/* 操作 */
const router = useRouter();
const goDetail = row => {
  const parameter = { stockTakeId: String(row.stockTakeId) };

  const temp = {
    path: "/depot/stockTake/facility",
    query: parameter,
    name: "DepotStockTakeFacility"
  };
  useMultiTagsStoreHook().handleTags("push", {
    ...temp,
    meta: {
      title: "工具库存盘点",
      dynamicLevel: 1
    }
  });
  router.push(temp);
};
</script>
